<cfmodule template="../../tag/layout.cfm">
<cfinclude template="../../inc/lib.cfm" >
    <div class="north" data-options="region:'north'">
        <h1>fwCMS <a href="?action=user.logout">Logout</a>
        </h1>
    </div>
    <div data-options="region:'center'">
        <div class="easyui-tabs" fit="true" border="false" id="tabs" closable="false">
                <div title="首页">
				<cfqueryparam cfsqltype="cf_sql_varchar" >
                </div>
        </div>
    </div>
    <div class="west" data-options="region:'west',split:true,title:'系统菜单',collapsible:false">
        <ul id="tree"></ul>
    </div>
    <div class="south" data-options="region:'south'">
        copyright
    </div>

    <div id="tabsMenu" class="easyui-menu" style="width:120px;">
        <div name="close">关闭</div>
        <div name="Other">关闭其他</div>
        <div name="All">关闭所有</div>
    </div>

</cfmodule>
<script>
	var mainMenu;

    $(function() {
        //动态菜单数据
        mainMenu = $("#tree").tree({
            url: '?action=resource.getFlatTree',
            method: 'get',
			parentField:"_parentid",
			textFiled:"name",
			idFiled:"id",
            onClick: function(node) {
                if (node.url) {
                   Open(node.text, node.url);
                }
            }
        });

        //在右边center区域打开菜单，新增tab
        function Open(text, url) {
            if ($("#tabs").tabs('exists', text)) {
                $('#tabs').tabs('select', text);
            } else {
				var content = '<iframe allowTransparency="true" frameborder="0"  src="?'+url+'" style="border:0;width:100%;height:99%;"></iframe>';
				$('#tabs').tabs('add', {
                    title: text,
                    closable: true,
                    content:content,
                    border:false,
                    fit:true
                });
            }
        }
        //绑定tabs的右键菜单
        $("#tabs").tabs({
            onContextMenu: function(e, title) {
                e.preventDefault();
                $('#tabsMenu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                }).data("tabTitle", title);
            }
        });
        //实例化menu的onClick事件
        $("#tabsMenu").menu({
            onClick: function(item) {
                CloseTab(this, item.name);
            }
        });
        //几个关闭事件的实现
        function CloseTab(menu, type) {
            var curTabTitle = $(menu).data("tabTitle");
            var tabs = $("#tabs");
            if (type === "close" && curTabTitle!="首页") {
                tabs.tabs("close", curTabTitle);
                return;
            }
            var allTabs = tabs.tabs("tabs");
            var closeTabsTitle = [];
            $.each(allTabs,
            function() {
                var opt = $(this).panel("options");
                if (opt.closable && opt.title != curTabTitle && type === "Other") {
                    closeTabsTitle.push(opt.title);
                } else if (opt.closable && type === "All") {
                    closeTabsTitle.push(opt.title);
                }
            });
            for (var i = 0; i < closeTabsTitle.length; i++) {
                tabs.tabs("close", closeTabsTitle[i]);
            }
        }
    });
</script>